﻿@page "/checkbox"

<div class="container-fluid">

    <div>
        <MatCheckbox @bind-Value="@checked1" Label="@(getLabel(checked1))"></MatCheckbox>
    </div>
    <div>
        <MatCheckbox @bind-Value="@checked2" Label="@(getLabel(checked2))"></MatCheckbox>
    </div>
    <div>
        <MatCheckbox @bind-Value="@checked1" Disabled="true" Label="Disabled"></MatCheckbox>
    </div>
    <div>
        <MatCheckbox @bind-Value="@checked2">Inline Label</MatCheckbox>
    </div>

    <div>
        <MatCheckbox @bind-Value="@checked3" Indeterminate="true">Indeterminate</MatCheckbox>
        <MatButton OnClick="@(_ =>
                                 {
                                     checked3 = null;
                                 })">Clear</MatButton>
    </div>

</div>

@code
        {
    bool checked1 = true;
    bool checked2 = false;
    bool? checked3 = null;

    string getLabel(bool val)
    {
        return !val ? "Check me!" : "Uncheck me?";
    }

}